@use '@/styles/themes.scss';

.hidden {
  display: none !important;
}

.check {
  color: var(--primary-color) !important;
  background-color: var(--secondary-color) !important;
  border-right: 2px solid var(--primary-color);
}

.secondCheck {
  border-left: 6px solid rgb(13, 204, 13) !important;
  background-color: var(--secondary-color) !important;
}

.content {

  // 第一导航宽
  --firstNavWidth:210px;
  // 第二导航宽
  --secondNavWidth:180px;

  box-sizing: border-box;
  width: 100%;
  height: 100%;
  display: flex;

  div {
    margin: 1px;
    background-color: rgb(255, 255, 255);
  }

  .fc {
    margin: 0;
    width: var(--firstNavWidth);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    border-bottom: 1px solid rgb(211, 210, 210);
    box-sizing: border-box;

    .scrollbar {
      margin: 0;

      .scrollbarItem {
        margin: 0;
        box-sizing: border-box;
        display: flex;
        justify-content: center;
        flex-direction: column;

        .firstNav {
          margin: 0;
          padding: 10px;
          height: 60px;
          display: flex;
          align-items: center;
          cursor: pointer;

          &:hover {
            background-color: var(--secondary-color);
            color: var(--primary-color);
          }

          div {
            background-color: transparent;
          }

          .firstNav_Txt {
            margin: 0;
            font-size: 18px;
          }

          .firstNav_point {
            display: flex;
            flex: 1;
            justify-content: right;
            font-size: 14px;
          }
        }
      }
    }
  }

  .machine {
    position: relative;
    margin: 0;
    box-sizing: border-box;
    border-left: 0.5px solid rgb(233, 233, 233);
    border-bottom: 1px solid rgb(211, 210, 210);
    flex: 1;
    display: flex;
    flex-direction: column;

    .title {
      box-sizing: border-box;
      display: flex;
      align-items: center;
      padding: 5px;
      border-bottom: 0.5px solid rgb(220, 220, 220);

      .txt {
        font-size: 18px;
        padding-left: 20px;
        box-sizing: border-box;
        border-left: 10px solid skyblue;
      }
    }

    .scrollbar {
      .machineSelect {
        display: flex;
        margin: 0;
        padding: 10px;
        box-sizing: border-box;
        font-size: 16px;
        border-bottom: 1px solid rgb(207, 207, 207);
        cursor: pointer;
      }

      li::before {
        content: "•";
        /* Unicode字符用于显示点 */
        color: black;
        /* 可以更改为你想要的颜色 */
        font-size: 16px;
        margin-right: 20px;
      }
    }

    .hiddenBtn:hover {
      border: 1px solid gray;
      border-left: none;
    }
  }

  .btn {
    margin: 0;
    box-sizing: border-box;
    border-left: 0.5px solid rgb(215, 215, 215);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-grow: 0;
    background-color: rgb(233, 229, 229);

    .hiddenBtn {
      width: 20px;
      height: 80px;
      border: none;
      background-color: skyblue;
      z-index: 9999 !important;
      display: flex;
      align-items: center;
      font-weight: 700;
      color: white;
      justify-content: center;
    }
  }

  .realize {
    flex: 7;
    border-radius: 10px;
    // height: 98%;
    // background-color: transparent;
    display: flex;
  }
}